<template>
    <Modal
      v-model="handleCheckBan"
      :title="banTitle || aboutBan.banTitle"
      :ok-text="$t('views.public.sure')"
      :cancel-text="$t('views.public.cancel')"
      @on-ok="banOkClick"
      @on-cancel="banCancel">
        <div class="ban-option dis-flex align-center">
          <div class="inline-block ban-label">*{{ $t('components.banModal.chooseTime') }}:	</div>
          <i-select class="ban-reason-select" v-model="aboutBan.banIndex" :placeholder="$t('views.public.pleaseChoose')">
            <i-option v-for="(item,index) in handleBanOption" :key="index" :value="item.value">{{ item.text }}</i-option>
          </i-select>
        </div>
        <div class="ban-option dis-flex align-center">
          <div class="inline-block ban-label">{{ $t('components.banModal.chooseReason') }}</div>
          <i-select class="ban-reason-select" v-model="aboutBan.banReasonIndex" :placeholder="$t('views.public.pleaseChoose')">
            <i-option v-for="(item,index) in handleReasonOption" :key="index" :value="item.value">{{ item.text }}</i-option>
          </i-select>
        </div>
        <!-- <div v-if="showBanIpt" class="ban-option dis-flex align-center">
          <div class="inline-block ban-label">{{ $t('components.banModal.content') }}</div>
          <Input class="ban-input" v-model="aboutBan.banText" :maxlength="aboutBan.textMaxLength" show-word-limit type="textarea" :placeholder="$t('components.banModal.enterContent')" />
        </div>
        <div class="ban-option dis-flex align-center">
          <div class="inline-block ban-label">{{ banImgLabel }}</div>
          <Input class="ban-input" v-model="aboutBan.banLink" :placeholder="$t('components.banModal.enterUrl')" style="width: 300px" />
        </div>           -->
    </Modal>
</template>
<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    banOption: {
      type: Array,
      default: () => [],
    },
    reasonOption: {
      type: Array,
      default: () => [],
    },
    banTitle: {
      type: String,
      default: '',
    },
    modalCheckBan: {
      type: Boolean,
      default: false,
    },
    banImgLabel: {
      type: String,
      default: function() {
        return this.$i18n.tc('components.banModal.imgVideoUrl');
      },
    },
    showBanIpt: {
      type: Boolean,
      default: true,
    },
    modalDataItem: {
      type: Object,
      default: () => {},
    }
  },
  data() {
    return {
      aboutBan: {
        banOption: this.getBanOption(),
        reasonOption: this.getReasonOption(),
        banTitle: this.$i18n.tc('components.banModal.banUser'),

        checkBan: this.modalCheckBan,
        banIndex: 1,
        banReasonIndex: 0,
        banText: '', // 举报内容
        textMaxLength: 300,
        banLink: '', // 图片或视频链接
      },
    };
  },
  computed: {
    handleBanOption() {
      if (this.banOption.length) return this.banOption;
      return this.aboutBan.banOption;
    },
    handleReasonOption() {
      if (this.reasonOption.length) return this.reasonOption;
      return this.aboutBan.reasonOption;
    },
    handleCheckBan: {
      get: function() {
        return this.modalCheckBan;
      },
      set: function(value) {
        this.$emit('setModalCheckBan', value);
      },
    },
    ...mapGetters([
      'getLocale',
    ]),
  },
  methods: {
    getBanOption() {
      return [
          {
            text: this.$i18n.tc('views.public.ban24h'),
            value: 1,
          },
          {
            text: this.$i18n.tc('views.public.ban72h'),
            value: 3,
          },
          {
            text: this.$i18n.tc('views.public.ban30D'),
            value: 30,
          },
          {
            text: this.$i18n.tc('views.public.permanentBan'),
            value: 0,
          },
        ];
    },
    getReasonOption() {
      return [
          {
            text: this.$i18n.tc('views.public.none'),
            value: 0,
          },
          {
            text: this.$i18n.tc('views.public.sex'),
            value: 1,
          },
          {
            text: this.$i18n.tc('views.public.curse'),
            value: 2,
          },
          {
            text: this.$i18n.tc('views.public.religion'),
            value: 3,
          },
          {
            text: this.$i18n.tc('views.public.terroristActivities'),
            value: 4,
          },
          {
            text: this.$i18n.tc('views.public.violationOfLaw'),
            value: 5,
          },
          {
            text: this.$i18n.tc('views.public.propaganda'),
            value: 6,
          },
          {
            text: this.$i18n.tc('views.public.resetHeadImg'),
            value: 7,
          },
        ];
    },
    banOkClick() {
      this.$emit('banOkClick', {
        time: this.aboutBan.banIndex,
        reason_id: this.aboutBan.banReasonIndex,
        // text: encodeURI(this.aboutBan.banText),
        // text_url: encodeURI(this.aboutBan.banLink),
        // text: this.aboutBan.banText,
        // text_url: this.aboutBan.banLink,
      });
      this.resetBan();
    },
    banCancel() {
      this.resetBan();
      this.$emit('banCancel');
    },
    // 初始化ban用户信息的表单
    resetBan() {
      this.aboutBan.banIndex = 1;
      this.aboutBan.banReasonIndex = 0;
      this.aboutBan.banText = '';
      this.aboutBan.banLink = '';
    },
  },
  watch: {
    getLocale: function() {
      this.banOption = this.getBanOption();
      this.areasonOption = this.getReasonOption();
    },
  },
}
</script>
<style lang="scss" scoped>
  .ban-label {
    width: 90px;
  }
  .ban-option {
    margin-bottom: 10px;
  }
  .ban-input {
    width: 50%;
    margin-left: 10px;
  }
  .ban-input >>> .ivu-input {
    font-size: 12px;
  }
  .ban-reason-select {
    margin-left: 10px;
    display: inline-block;
    max-width: 180px;
  }
</style>
